<template>
  <div class="index-job">
    <div class="index-title">
      <h2>职位精选</h2>
      <h5>走出校门的第一步</h5>
    </div>
    <div class="index-show">
      <nuxt-link
        v-for="v in jobList"
        :key="v.id"
        :to="{path: 'job/detail', query: {id: v.id}}"
        class="index-item transform"
      >
        <div class="item-title clearfix">
          <p>{{ v.name }}</p>
          <p v-if="v.payid">{{ v.payid }}-{{ v.pay_end }}k</p>
        </div>
        <div class="com clearfix">
          <div
            class="com-img"
            :style="{
              background: 'url(' + v.company_logo + ') center center / cover no-repeat',
            }"
          ></div>
          <div class="com-text">
            <p class="com-title">{{ v.company_name }}</p>
            <p class="com-address">{{ v.city_name }}</p>
          </div>
        </div>
        <div class="time clearfix">
          <p class="last">网申截止 {{ v.end_time_cn }}</p>
          <p class="apply">
            <i class="iconfont icon-right"></i>
            <span>立即申请</span>
          </p>
        </div>
      </nuxt-link>
    </div>
    <div class="more-job">
      <button type="button" class="more-btn transform" @click="jumpTo">
        更多职位
      </button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['hotjob'],
  watch: {
    hotjob (val) {
      this.jobList = val;
    }
  },
  data () {
    return {
      jobList: [],
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    jumpTo () {
      this.$router.push('/job');
    }
  }
}
</script>
<style lang="scss" scoped>
.index-job {
  padding: 40px 0;
  position: relative;
  .index-title {
    text-align: center;
    padding-bottom: 40px;
    h2 {
      font-size: 36px;
      color: #333;
      margin-bottom: 5px;
    }
    h5 {
      font-size: 18px;
      color: #666;
    }
  }
  .index-show {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .index-item {
      height: 170px;
      width: 386px;
      margin: 0 14px 14px 0;
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 15px;
      &:hover {
        box-shadow: 0 5px 15px 0 #e8e8e9;
        transform: translateY(-5px);
      }

      &:nth-child(3n) {
        margin-right: 0;
      }
      .item-title {
        height: 35px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        p {
          line-height: 25px;
          color: #333;
        }
        p:first-child {
          float: left;
        }
        p:last-child {
          float: right;
        }
      }
      .com {
        padding: 15px 0 10px 0;
        & > div {
          float: left;
        }
        .com-img {
          height: 60px;
          width: 60px;
        }
        .com-text {
          padding-left: 10px;
          font-size: 14px;
          .com-title {
            color: #333;
            line-height: 30px;
          }
          .com-address {
            color: #999;
            line-height: 20px;
          }
        }
      }
      .time {
        font-size: 12px;
        height: 26px;
        line-height: 26px;
        .last {
          float: left;
          position: relative;
          padding-left: 6px;
          color: #666;
          vertical-align: middle;
          &::before {
            content: ' ';
            position: absolute;
            left: 0;
            top: 7px;
            height: 12px;
            width: 2px;
            background: $base-color;
          }
        }
        .apply {
          float: right;
          span,
          i {
            float: right;
            line-height: 26px;
            font-size: 12px;
            color: #666;
          }
          i {
            margin-top: 2px;
          }
        }
      }
    }
  }
  .more-job {
    margin: 40px 0;
    text-align: center;
    .more-btn {
      height: 40px;
      width: 200px;
      background: $base-color;
      color: #fff;
      font-size: 18px;
      letter-spacing: 2px;
      outline: none;
      border: 1px solid #e6e8ea;
      border-radius: 4px;
      &:hover {
        background: #fff;
        color: $base-color;
        cursor: pointer;
        border-color: $base-color;
      }
    }
  }
}
</style>
